<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/homePage' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>租赁管理</el-breadcrumb-item>
                <el-breadcrumb-item>所有车辆</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>

            <el-form :inline="true" :model="queryCarData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="queryCarData.carName" placeholder="请输入车名"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="queryCarData.typeName" placeholder="请输入车牌类型"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="showAllCar">查询</el-button>
                    <el-button type="primary" @click="showAddForm({})">添加</el-button>
                </el-form-item>
            </el-form>

            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <!-- car 表的 id-->
                    <el-table-column
                            prop="id"
                            label="车id">
                    </el-table-column>
                    <!-- car表的 name -->
                    <el-table-column
                            prop="carName"
                            label="车名">
                    </el-table-column>
                    <!-- car_brank 表的 name-->
                    <el-table-column
                            prop="brandName"
                            label="车牌名">
                    </el-table-column>
                    <!-- car_type 表的typename -->
                    <el-table-column
                            prop="typeName"
                            label="类型">
                    </el-table-column>
                    <!-- car 表的 vin-->
                    <el-table-column
                            prop="vin"
                            label="车辆识别码">
                    </el-table-column>
                    <!-- car_config 表的 airSuction -->
                    <el-table-column
                            prop="airSuction"
                            label="进气方式">
                    </el-table-column>
                    <!-- car_config 表的 seating -->
                    <el-table-column
                            prop="seating"
                            label="座位数">
                    </el-table-column>
                    <!-- car_config 表的 displacement -->
                    <el-table-column
                            prop="displacement"
                            label="排量">
                    </el-table-column>
                    <!-- car_config 表的 fcphk-->
                    <el-table-column
                            prop="fcphk"
                            label="百公里油耗">
                    </el-table-column>
                    <!-- car表的buyPrice  -->
                    <el-table-column
                            prop="buyPrice"
                            label="进价">
                    </el-table-column>
                    <!-- car表的 price -->
                    <el-table-column
                            prop="price"
                            label="租价">
                    </el-table-column>
                    <!-- car_shop 表的 name-->
                    <el-table-column
                            prop="shopName"
                            label="门店名">
                    </el-table-column>
                    <!-- car表的 status-->
                    <el-table-column
                            prop="state"
                            label="车辆状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.state==1">可租</span>
                            <span v-if="scope.row.state==2">维修中</span>
                            <span v-if="scope.row.state==3">已租出</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="230">
                        <template slot-scope="scope">
                            <!-- 修改 -->
                            <el-button type="primary" icon="el-icon-edit" circle @click="showAddForm(scope.row)"></el-button>
                            <!-- 删除 -->
                            <el-button type="danger" icon="el-icon-delete" circle @click="deleteCar(scope.row.id)"></el-button>
                            <!-- 维修管理 -->
                            <el-button type="warning" round @click="showMaintainForm(scope.row)">维修管理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>

                <el-dialog
                        title="新增车辆"
                        :visible.sync="addForm"
                        width="30%">
                <span>
                    <!-- 新增车辆信息 -->
                    <el-form ref="carForm" :model="addCarForm" :rules="rules" label-position="left" label-width="80px">
                        <el-input v-model="addCarForm.id" type="hidden"></el-input>
                        <el-form-item label="车辆名称" prop="carName">
                            <el-input v-model="addCarForm.carName"></el-input>
                        </el-form-item>
                        <el-form-item label="车牌" prop="brandId">
                            <el-select v-model="addCarForm.brandId" placeholder="请选择车牌">
                              <el-option
                                      v-for="item in carBrand"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id">
                              </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="类型" prop="typeId">
                            <el-select v-model="addCarForm.typeId" placeholder="请选择类型">
                              <el-option
                                      v-for="item in carType"
                                      :key="item.id"
                                      :label="item.typeName"
                                      :value="item.id">
                              </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="配置" prop="configId">
                            <el-select v-model="addCarForm.configId" placeholder="请选择配置">
                              <el-option
                                      v-for="item in carConfig"
                                      :key="item.id"
                                      :label="item.typename"
                                      :value="item.id">
                              </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属门店" prop="shopId">
                            <el-select v-model="addCarForm.shopId" placeholder="请选择所属门店">
                              <el-option
                                      v-for="item in carShop"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id">
                              </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="当前状态" prop="state">
                            <el-select v-model="addCarForm.state" placeholder="请选择所属门店">
                              <el-option
                                      v-for="item in carState"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id">
                              </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="车辆识别码" prop="vin">
                            <el-input v-model="addCarForm.vin"></el-input>
                        </el-form-item>
                        <el-form-item label="进价" prop="buyPrice">
                            <el-input v-model.number="addCarForm.buyPrice"></el-input>
                        </el-form-item>
                        <el-form-item label="租价" prop="price">
                            <el-input v-model.number="addCarForm.price"></el-input>
                        </el-form-item>
                        <el-form-item label="简介" prop="intro">
                            <el-input v-model="addCarForm.intro"></el-input>
                        </el-form-item>
                    </el-form>
                </span>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="addForm = false">取 消</el-button>
                    <el-button type="primary" @click="addCar('carForm')">确 定</el-button>
                    </span>
                </el-dialog>

                <el-dialog
                        title="车辆维修"
                        :visible.sync="showMaintain"
                        width="30%">
                <span>
                    <el-form ref="carMaintainForm" :model="carMaintainForm"  label-position="left" label-width="80px">
                        <el-input v-model="carMaintainForm.carId" type="hidden"></el-input>
                        <el-form-item label="车辆名称" prop="car">
                            <el-input v-model="carMaintainForm.car"></el-input>
                        </el-form-item>

                        <el-form-item label="维修厂" prop="">
                            <el-select v-model="carMaintainForm.shopId" placeholder="请选择维修厂">
                              <el-option
                                      v-for="item in maintainShop"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id">
                              </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="损坏零件" prop="">
                            <el-input v-model="carMaintainForm.badParts"></el-input>
                        </el-form-item>
                        <el-form-item label="维修价格" prop="">
                            <el-input v-model="carMaintainForm.maintenancePrice"></el-input>
                        </el-form-item>
                        <el-form-item label="故障描述" prop="">
                            <el-input v-model="carMaintainForm.recordInfo"></el-input>
                        </el-form-item>
                        <el-form-item label="受损程度">
                            <el-select v-model="carMaintainForm.damagedStatus" placeholder="请选择受损程度">
                              <el-option
                                      v-for="item in damagedStatus"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id">
                              </el-option>
                            </el-select>
                        </el-form-item>

                    </el-form>
                </span>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="showMaintain = false">取 消</el-button>
                    <el-button type="primary" @click="carMaintain">确 定</el-button>
                    </span>
                </el-dialog>
            </template>

        </el-card>
    </div>
</template>

<script>
    export default {
        name: "",
        data() {
            return {
                queryCarData: {
                    carName: '',
                    typeName: '',
                },
                addCarForm: {
                    id: '',
                    carName: '',
                    brandId: '',
                    typeId: '',
                    configId: '',
                    shopId: '',
                    state: '',
                    vin: '',
                    buyPrice: '',
                    price: '',
                    intro: '',
                },
                carMaintainForm: {

                },
                rules: {
                    carName: [
                        { required: true, message: '请输入汽车名', trigger: 'blur' }
                    ],
                    brandId: [
                        { required: true, message: '请选择汽车牌子', trigger: 'blur' }
                    ],
                    typeId: [
                        { required: true, message: '请选择舒适类型', trigger: 'blur' }
                    ],
                    configId: [
                        { required: true, message: '请选择配置类型', trigger: 'blur' }
                    ],
                    shopId: [
                        { required: true, message: '请选择门店', trigger: 'blur' }
                    ],
                    state: [
                        { required: true, message: '请选择状态', trigger: 'blur' }
                    ],
                    vin: [
                        { required: true, message: '请输入车辆识别码', trigger: 'blur' }
                    ],
                    buyPrice: [
                        { required: true, message: '请输入进价', trigger: 'blur' },
                        { type: 'number', message: '进价必须为数字值',trigger: 'blur'}
                    ],
                    price: [
                        { required: true, message: '请输入租价', trigger: 'blur' },
                        { type: 'number', message: '租价必须为数字值',trigger: 'blur'}
                    ],
                    intro: [
                        { required: true, message: '请输入信息', trigger: 'blur' }
                    ],
                },
                carType: [],
                carBrand: [],
                carShop: [],
                carConfig:[],
                maintainShop: [],
                carState: [
                    {
                        id: 1,
                        name: '可租'
                    },
                    {
                        id: 2,
                        name: '维修中'
                    },
                    {
                        id: 3,
                        name: '已租出'
                    },
                ],
                damagedStatus: [
                    {
                        id: 0,
                        name: '无'
                    },
                    {
                        id: 1,
                        name: '轻微'
                    },
                    {
                        id: 2,
                        name: '普通'
                    },
                    {
                        id: 3,
                        name: '严重'
                    },
                ],
                showMaintain: false,
                tableData: [],
                addForm : false,
                pageSize: 10,
                currentPage: 1,
                total: 0,
            }
        },
        methods: {
            handleSizeChange(value) {
                this.pageSize = value;
                this.showAllCar();
            },
            handleCurrentChange(value) {
                this.currentPage = value;
                this.showAllCar();
            },
            // 查询全的汽车信息
            showAllCar() {
                this.$axios({
                    method: 'get',
                    url: 'clms-lease/car/selectCar',
                    params: {
                        carName: this.queryCarData.carName,
                        typeName: this.queryCarData.typeName,
                        pageno: this.currentPage,
                        pagesize: this.pageSize
                    }
                }).then( result => {
                    if (result.data.code == 200) {
                        this.tableData = result.data.listData;
                        this.total = result.data.object.total
                    }
                })
            },
            // 查询车牌
            showCarBrand() {
                this.$axios({
                    method: 'get',
                    url: 'clms-lease/carbrand/showCarBrand',
                }).then( result => {
                    if (result.data.code == 200) {
                        this.carBrand = result.data.listData;
                    }
                })
            },
            // 查询全部的汽车配置
            showAllCarConfig() {
                this.$axios({
                    method: 'get',
                    url: 'clms-lease/carconfig/showAllCarConfig',
                }).then( result => {
                    if (result.data.code == 200) {
                        this.carConfig = result.data.listData
                    }
                })
            },
            // 查询全部的汽车类型
            showAllCarType() {
                this.$axios({
                    method: 'get',
                    url: 'clms-lease/cartype/showAllCarType',
                }).then( result => {
                    if (result.data.code == 200) {
                        this.carType = result.data.listData
                    }
                })
            },
            // 查询全部的汽车门店
            showAllCarShop() {
                this.$axios({
                    method: 'get',
                    url: 'clms-lease/carshop/select',
                }).then( result => {
                    if (result.data.code == 200) {
                        this.carShop = result.data.listData
                    }
                })
            },
            // 查询维修门店
            getAllMaintainShop() {
                this.$axios({
                    method: 'post',
                    url: 'clms-cmms/tbMaintainShop/getAllMaintainShopNoArgs',
                }).then( result => {
                    this.maintainShop = result.data.result.AllMaintainShop;
                })
            },
            // 弹出添加窗口
            showAddForm(row){
                console.log(row);
                this.addForm = true;
                this.addCarForm = row;
            },
            // 添加汽车
            addCar(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var buyPrice = parseInt(this.addCarForm.buyPrice);
                        var price = parseInt(this.addCarForm.price);
                        if (buyPrice >0 && price >0) {
                            if (this.addCarForm.id == null) {
                                this.$axios({
                                    method: 'post',
                                    url: 'clms-lease/car/addCar',
                                    data: this.addCarForm
                                }).then(result => {
                                    if (result.data.code == 200) {
                                        this.$message.success(result.data.message);
                                        this.addForm = false;
                                        this.showAllCar()
                                    } else {
                                        this.$message.error(result.data.message);
                                    }
                                })
                            } else {
                                this.$axios({
                                    method: 'post',
                                    url: 'clms-lease/car/updateCar',
                                    data: this.addCarForm
                                }).then(result => {
                                    if (result.data.code == 200) {
                                        this.$message.success(result.data.message);
                                        this.addForm = false;
                                        this.showAllCar()
                                    } else {
                                        this.$message.error(result.data.message);
                                    }
                                })
                            }
                        } else {
                            this.$message.error("数据输入有误")
                        }
                    } else {
                        this.$message.error("数据输入有误")
                    }
                });
            },
            deleteCar(id) {
                this.$axios({
                    method: 'get',
                    url: 'clms-lease/car/deleteCar',
                    params: {
                        id: id
                    }
                }).then(result => {
                    if (result.data.code == 200) {
                        this.$message.success(result.data.message);
                        this.showAllCar()
                    } else {
                        this.$message.error(result.data.message);
                    }
                })
            },
            showMaintainForm(row) {
                this.showMaintain = true;
                this.carMaintainForm.car = row.carName;
                this.carMaintainForm.carId = row.id;
                this.carMaintainForm.recordDate = new Date().toLocaleString();
            },
            // 提交维修
            carMaintain() {
                this.$axios({
                    method: 'put',
                    url: 'clms-cmms/tbMaintainShopRecordCarInfo/updateRecordCarInfo',
                    data: this.carMaintainForm
                }).then(result => {
                    if (result.data.code == 2000) {
                        this.$message.success("提交维修成功");
                        this.showMaintain = false;
                    } else {
                        this.$message.error("提交维修失败");
                    }
                })
            }
        },
        created() {
            this.showAllCar();
            this.showAllCarConfig();
            this.showAllCarType();
            this.showCarBrand();
            this.showAllCarShop();
            this.getAllMaintainShop();
        }
    }
</script>
